<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>一起合租吧!</title>

    <script  th:src="@{/airent/js/vue.js}" type="text/javascript"></script>

    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="icon" th:href="@{/airent/common/imgs/icon.ico}" type="images/x-ico" />
    <link rel="stylesheet" th:href="@{/airent/css/myCSS.css}">
</head>
<body>
<div th:replace="~{head/topbar::topBar}"></div>
<div id="myCotenancy">
    <div class="body">
        <div class="search">
            <div class="inner">
                <div class="col-lg-6" >

                    <div class="h1">
                        快来和我一起住!
                    </div>

                    <div class="filter">

                        <!-- 筛选性别 -->
                        <div class="f1">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary" @click="find('仅限男生')">仅限男生</button>
                                <button type="button" class="btn btn-secondary" @click="find('仅限女生')">仅限女生</button>
                                <button type="button" class="btn btn-secondary" @click="find('男女不限')">男女不限</button>
                                <button type="button" id="issuepost" class="btn btn-secondary"><a th:href="@{/issuepost.html}" class="issuepost" >点我发布招租信息</a></button>
                            </div>
                            <hr>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm">
                                    <div class=" scontainer">
                                        <div class="row">
                                            <div class="col-sm-2">
                                                <p style="text-align:center; margin-bottom: 0; margin-top: 10%;">价格</p>
                                            </div>
                                            <div class="col-sm-5">
                                                <span><input class="form-control mr-sm-2" type="search"  style="width: 120px;" v-model="minPrice"></span>
                                            </div>
                                            <div class="col-sm-5">
                                                <span><input class="form-control mr-sm-2" type="search"  style="width: 120px;" v-model="maxPrice"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="row" style="padding-bottom: 20px;padding-top: 20px;">
                                <div class="col-sm-10" style="padding-top: 5px">
                                    <input id="search-input" type="text" class="form-control" v-model="keyWord" placeholder="请输入帖子关键字开始找房" style="padding-right: 10px">
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-default btn-sm btn-block" @click="search"><a  id="GO" href="javascript:void(0)" @click="search"> 搜索</a></button>
                                </div>
                            </div>

                            <!-- <div class="f3">
                              <input id="search-input" type="text" class="form-control" placeholder="请输入帖子关键字开始找房" style="padding-right: 10px;">
                            </div> -->
                        </div>

                        <!-- <div class="f3">
                          <button type="button" class="btn btn-default btn-sm btn-block"><a  id="GO" href="../view/roomatedesc.html"> 搜索</a></button>
                        </div> -->

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style=" width: 500px;">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <div class="btn-group" role="group">
                <div class="btn-group btn-group-sm" role="group" >
                    <button type="button" class="btn btn-secondary" id="btn-price" @click="sort()">按价格排序</button>
                    <!-- <button type="button" class="btn btn-secondary" id="btn-area">有效期</button>-->
                </div>
            </div>
        </div>
    </div>

    <!--瀑布式卡片布局-->
    <div class="container">
        <!--<div class="flex_box"></div>-->
        <div class="waterfall">
            <div class="item" v-for="h in house" >
                <div class="item-content" >
                    <div class="card" style="width:300px">
                        <div class="img">
                            <a href="javascript:void(0)" @click="go(h.houseNumber)"><img class="card-img-top" src="https://airent-1303816068.cos.ap-shanghai.myqcloud.com/avatar/61261602251233995.gif" alt="Card image"></a>
                        </div>
                        <div class="card-body">
                            <div>
                                <h4 ><a href="javascript:void(0)" @click="go(h.houseNumber)">{{h.cotenancyTitle}}</a></h4>
                                <span class="badge badge-light">{{h.roommateGender}}</span>
                                <span class="badge badge-light">独立卫浴</span>
                                <span class="badge badge-light">带阳台</span>
                            </div>
                            <div class="momey">
                                <h4 >{{h.cotenancyPrice}}/月</h4>
                            </div>
                            <div>
                                <p class="details">{{h.content}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="house-page" >
        <nav aria-label="Page navigation example" class="house-page">
            <ul  class="pagination">
                <li class="page-item"><a class="page-link">当前<span v-text="pageNum"></span>/<span v-text="pages"></span>页 总计 :<span v-text="total"></span>条</a></li>
                <li class="page-item">
                    <a class="page-link" aria-label="Previous" v-if="pageNum > 1" @click="jump(1)"><span aria-hidden="true">首页</span></a>
                    <a class="page-link" aria-label="Previous" v-else href="javascript:void(0)"><span aria-hidden="true">首页</span></a>
                </li>

                <li class="page-item">
                    <a class="page-link" v-if="pageNum > 1" href="javascript:void(0)" aria-label="Previous" @click="jump(prePage)">
                        <span aria-hidden="true">上一页</span>
                    </a>
                    <a class="page-link" v-else href="javascript:void(0)" aria-label="Previous" >
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" v-if="pageNum < pages" href="javascript:void(0)" aria-label="Next" @click="jump(nextPage)">
                        <span aria-hidden="true">下一页</span>
                    </a>
                    <a class="page-link" v-else href="javascript:void(0)" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" aria-label="Next" v-if="pageNum < pages" @click="jump(pages)"><span aria-hidden="true">尾页</span></a>
                    <a class="page-link" aria-label="Next" v-else href="javascript:void(0)"><span aria-hidden="true">尾页</span></a>
                </li>
                <!--<li class="page-item">
                    <input type="text" v-model="pageNum"  style="width: 50px">
                    <input type="button" class="btn btn-secondary" @click="to" value="跳转">
                </li>-->
            </ul>
        </nav>
    </div>
</div>



<!-- 底部 -->
<div th:replace="~{food/bottombar::topBar}"></div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script>
    let vueApp = new Vue({
        el:"#myCotenancy",
        data:{
            house:[],
            pageNum:1,
            pages:0,
            total:0,
            prePage:0,
            nextPage:0,
            roommateGender:"",
            minPrice:0,
            maxPrice:0,
            keyWord:"",
        },
        methods:{
            to:function (){
                let url = "/cotenancy/showMyCotenancy";
                let minPrice = "&minPrice=" + vueApp.minPrice;
                let maxPrice = "&maxPrice=" + vueApp.maxPrice;
                let keyWord = "&keyWord=" + vueApp.keyWord;
                let param = "now=" + vueApp.pageNum;
                if (vueApp.pageNum < vueApp.pages && vueApp.pageNum > 1){
                    if (vueApp.minPrice != null || vueApp.minPrice != "0" || vueApp.minPrice != ""){
                        param += minPrice;
                    }
                    if (vueApp.maxPrice != null || vueApp.maxPrice != "0" || vueApp.maxPrice != ""){
                        param += maxPrice;
                    }
                    if (vueApp.keyWord != "" || vueApp.keyWord != null){
                        param += keyWord;
                    }
                    $.post(url,param,function (result){
                        vueApp.house = result.list;
                        vueApp.pageNum = result.pageNum;
                        vueApp.pages = result.pages;
                        vueApp.total = result.total;
                        vueApp.prePage = result.prePage;
                        vueApp.nextPage = result.nextPage;
                    },"Json")
                }

            },
            jump:function (ele){
                let url = "/cotenancy/showMyCotenancy";
                let minPrice = "&minPrice=" + vueApp.minPrice;
                let maxPrice = "&maxPrice=" + vueApp.maxPrice;
                let keyWord = "&keyWord=" + vueApp.keyWord;
                let param = "now=" + ele;
                if (vueApp.minPrice != null || vueApp.minPrice != "0" || vueApp.minPrice != ""){
                    param += minPrice;
                }
                if (vueApp.maxPrice != null || vueApp.maxPrice != "0" || vueApp.maxPrice != ""){
                    param += maxPrice;
                }
                if (vueApp.keyWord != "" || vueApp.keyWord != null){
                    param += keyWord;
                }
                $.post(url,param,function (result){
                    vueApp.house = result.list;
                    vueApp.pageNum = result.pageNum;
                    vueApp.pages = result.pages;
                    vueApp.total = result.total;
                    vueApp.prePage = result.prePage;
                    vueApp.nextPage = result.nextPage;
                },"Json")
            },
            find:function (ele){
                let url = "/cotenancy/showMyCotenancy";
                let minPrice = "&minPrice=" + vueApp.minPrice;
                let maxPrice = "&maxPrice=" + vueApp.maxPrice;
                let keyWord = "&keyWord=" + vueApp.keyWord;
                let param = "roommateGender="+ele;
                if (vueApp.minPrice != null || vueApp.minPrice != "0" || vueApp.minPrice != ""){
                    param += minPrice;
                }
                if (vueApp.maxPrice != null || vueApp.maxPrice != "0" || vueApp.maxPrice != ""){
                    param += maxPrice;
                }
                if (vueApp.keyWord != "" || vueApp.keyWord != null){
                    param += keyWord;
                }
                $.post(url,param,function (result){
                    vueApp.house = result.list;
                    vueApp.pageNum = result.pageNum;
                    vueApp.pages = result.pages;
                    vueApp.total = result.total;
                    vueApp.prePage = result.prePage;
                    vueApp.nextPage = result.nextPage;
                },"Json")
            },
            search:function (){
                let url = "/cotenancy/showMyCotenancy";
                let minPrice = "&minPrice=" + vueApp.minPrice;
                let maxPrice = "&maxPrice=" + vueApp.maxPrice;
                let keyWord = "&keyWord=" + vueApp.keyWord;
                let param = null;
                if (vueApp.minPrice != null || vueApp.minPrice != "0" || vueApp.minPrice != ""){
                    param += minPrice;
                }
                if (vueApp.maxPrice != null || vueApp.maxPrice != "0" || vueApp.maxPrice != ""){
                    param += maxPrice;
                }
                if (vueApp.keyWord != "" || vueApp.keyWord != null){
                    param += keyWord;
                }
                $.post(url,param,function (result){
                    vueApp.house = result.list;
                    vueApp.pageNum = result.pageNum;
                    vueApp.pages = result.pages;
                    vueApp.total = result.total;
                    vueApp.prePage = result.prePage;
                    vueApp.nextPage = result.nextPage;
                },"Json")
            },
            sort:function (){
                let btn_price = $("#btn-price");
                btn_text = btn_price.html();

                let url = "/cotenancy/showMyCotenancy";
                let minPrice = "&minPrice=" + vueApp.minPrice;
                let maxPrice = "&maxPrice=" + vueApp.maxPrice;
                let keyWord = "&keyWord=" + vueApp.keyWord;
                let param = null;
                let sort = null;
                if (vueApp.minPrice != null || vueApp.minPrice != "0" || vueApp.minPrice != ""){
                    param += minPrice;
                }
                if (vueApp.maxPrice != null || vueApp.maxPrice != "0" || vueApp.maxPrice != ""){
                    param += maxPrice;
                }
                if (vueApp.keyWord != "" || vueApp.keyWord != null){
                    param += keyWord;
                }

                if (btn_text == "按价格排序" || btn_text == "按价格排序↓") {
                    btn_text = "按价格排序↑"
                    sort = "ASC";
                } else {
                    btn_text = "按价格排序↓"
                    sort = "DESC";
                }
                let mySort = "&sort=" + sort;
                param += mySort;

                $.post(url,param,function (result){
                    vueApp.house = result.list;
                    vueApp.pageNum = result.pageNum;
                    vueApp.pages = result.pages;
                    vueApp.total = result.total;
                    vueApp.prePage = result.prePage;
                    vueApp.nextPage = result.nextPage;
                },"Json")

                btn_price.html(btn_text);
            },
            go:function (ele){
                location.href = "/cotenancy/showOneHouse/"+ele;
            }
        },
        created:function (){
            let url = "/cotenancy/showMyCotenancy";
            $.post(url,null,function (result){
                vueApp.house = result.list;
                vueApp.pageNum = result.pageNum;
                vueApp.pages = result.pages;
                vueApp.total = result.total;
                vueApp.prePage = result.prePage;
                vueApp.nextPage = result.nextPage;

            },"Json")
        }
    })


</script>
</body>
</html>
